<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Canvas绘图示例</title>
    <style>
        canvas {
            border: 1px solid #333;
            background-color: #f0f8ff;
        }
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
<h1>Canvas绘图演示</h1>
<canvas id="tutorial" width="600" height="400"></canvas>

<script type="text/javascript">
    function draw(){
        var canvas = document.getElementById('tutorial');
        if(!canvas.getContext) return;
        var ctx = canvas.getContext("2d");

        // 绘制天空背景（渐变）
        var skyGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
        skyGradient.addColorStop(0, "#87CEEB"); // 浅蓝色
        skyGradient.addColorStop(1, "#E0F7FA"); // 更浅的蓝色
        ctx.fillStyle = skyGradient;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 绘制太阳
        ctx.beginPath();
        ctx.arc(500, 80, 60, 0, Math.PI * 2, true);
        var sunGradient = ctx.createRadialGradient(500, 80, 0, 500, 80, 60);
        sunGradient.addColorStop(0, "#FFFF00"); // 黄色
        sunGradient.addColorStop(1, "#FFA500"); // 橙色
        ctx.fillStyle = sunGradient;
        ctx.fill();

        // 绘制太阳光芒
        for(var i = 0; i < 12; i++) {
            ctx.save();
            ctx.translate(500, 80);
            ctx.rotate(i * Math.PI / 6);
            ctx.fillStyle = "#FFD700";
            ctx.fillRect(0, -80, 10, 30);
            ctx.restore();
        }

        // 绘制远山
        ctx.beginPath();
        ctx.moveTo(0, 300);
        ctx.bezierCurveTo(150, 200, 250, 250, 300, 220);
        ctx.bezierCurveTo(350, 190, 450, 240, 600, 180);
        ctx.lineTo(600, 400);
        ctx.lineTo(0, 400);
        ctx.closePath();
        ctx.fillStyle = "#8FBC8F";
        ctx.fill();

        // 绘制近山
        ctx.beginPath();
        ctx.moveTo(0, 350);
        ctx.bezierCurveTo(100, 280, 200, 330, 300, 290);
        ctx.bezierCurveTo(400, 250, 500, 320, 600, 270);
        ctx.lineTo(600, 400);
        ctx.lineTo(0, 400);
        ctx.closePath();
        ctx.fillStyle = "#228B22";
        ctx.fill();

        // 绘制树木
        function drawTree(x, y, height) {
            // 树干
            ctx.fillStyle = "#8B4513";
            ctx.fillRect(x - 5, y, 10, height * 0.3);

            // 树叶
            ctx.beginPath();
            ctx.moveTo(x, y - height * 0.7);
            ctx.lineTo(x - height * 0.3, y);
            ctx.lineTo(x + height * 0.3, y);
            ctx.closePath();
            ctx.fillStyle = "#228B22";
            ctx.fill();
        }

        // 绘制几棵树
        drawTree(100, 350, 80);
        drawTree(150, 370, 70);
        drawTree(450, 360, 90);
        drawTree(500, 380, 60);

        // 绘制云朵
        function drawCloud(x, y, size) {
            ctx.beginPath();
            ctx.arc(x, y, size, 0, Math.PI * 2);
            ctx.arc(x + size * 0.8, y - size * 0.3, size * 0.7, 0, Math.PI * 2);
            ctx.arc(x + size * 1.6, y, size * 0.9, 0, Math.PI * 2);
            ctx.arc(x + size * 0.4, y + size * 0.3, size * 0.6, 0, Math.PI * 2);
            ctx.arc(x + size * 1.2, y + size * 0.2, size * 0.7, 0, Math.PI * 2);
            ctx.fillStyle = "white";
            ctx.fill();
        }

        // 绘制几朵云
        drawCloud(100, 80, 20);
        drawCloud(220, 50, 25);
        drawCloud(350, 100, 18);

        // 绘制文字
        ctx.font = "20px Arial";
        ctx.fillStyle = "#333";
        ctx.textAlign = "center";
        ctx.fillText("Canvas 绘图示例", canvas.width / 2, 30);
    }

    // 页面加载完成后执行绘图
    window.onload = draw;
</script>
</body>
</html>
